import Taro, { Component } from '@tarojs/taro'
import { Picker, View, ScrollView, Button } from '@tarojs/components'
import { AtButton, AtCard, AtModal, AtMessage, AtModalHeader, AtModalContent, AtModalAction, AtRadio } from 'taro-ui'
import moment from 'moment'
import { getMemberLeaveList, deleteLeave, leaveBpm } from './service'
import { leaveType, approveStatusList, bpmTypeEnum, getIndex } from '../../constant'
import './index.scss'
import { connect } from '@tarojs/redux'
import { setRefresh } from '../../actions/refresh'
import { getBpmType } from '../../utils'
import NoData from '../components/NoData'
import StatusLabel from '../components/StatusLabel'

@connect(({ refresh, user }) => ({
  refresh, user
}), (dispatch) => ({
  setRefresh (isRefresh) {
    dispatch(setRefresh(isRefresh))
  },
}))
export default class attendance extends Component {

  config = {
    navigationBarTitleText: '请假查询',
  }

  constructor (props) {
    super(props)
    this.state = {
      dataList: [],
      date: moment(new Date()).format('YYYY-MM'),
      id: null,
      isOpen: false,
      bpmModalVisible: false,
      range: null
    }
  }

  componentDidMount () {
    this.initList()
  }

  componentDidShow () {
    if (this.props.refresh.flag) {
      this.initList()
      this.props.setRefresh(false)
    }
  }

  initList (date = this.state.date) {
    getMemberLeaveList(date).then(res => {
      this.setState({ dataList: res.list })
    })
  }

  onTimeChange (e) {
    this.setState({ date: moment(e.detail.value, "YYYY-M").format('YYYY-MM') })
    this.initList(moment(e.detail.value, "YYYY-M").format('YYYY-MM'))
  }

  turnToApply (applyData) {
    let url = '/pages/leave/apply/index'
    if (applyData) {
      applyData.leaveBeginTime = applyData.leaveBeginTime ? moment(applyData.leaveBeginTime).format('YYYY-MM-DD') : null
      applyData.leaveEndTime = applyData.leaveEndTime ? moment(applyData.leaveEndTime).format('YYYY-MM-DD') : null
      url += '?applyData=' + JSON.stringify(applyData)
    }
    Taro.navigateTo({ url })
  }

  showDelModal = (id) => {
    this.setState({ isOpen: true, id })
  }

  handleCancel = () => {
    this.setState({ isOpen: false, id: null })
  }

  sendBPM = (id) => {
    const { user } = this.props
    leaveBpm({ id, range:getBpmType(user.jobLevel), isMobile: 1 }).then(res => {
      window.location.href = res.data
    })
  }

  handleConfirm = () => {
    const { id } = this.state
    deleteLeave(id).then(res => {
      if (res.flag) {
        this.handleCancel()
        this.initList()
        Taro.atMessage({ message: '删除成功！', type: 'success' })
      }
    })
  }

  handleDetails = (url) => {
    window.location.href = url
  }

  render () {
    return (
      <View>
        <AtMessage/>
        <View className='topBar'>
          <AtButton size='small' onClick={Taro.navigateBack}>返回</AtButton>
          <Picker mode='date' fields='month' value={this.state.date} onChange={this.onTimeChange.bind(this)}>
            <View className='picker'>
              {this.state.date} <View className='at-icon at-icon-chevron-down iconStyle'></View>
            </View>
          </Picker>
          <AtButton type='primary' size='small' onClick={this.turnToApply}>新增</AtButton>
        </View>
        <ScrollView
          className='scrollView'
          scrollY
          scrollWithAnimation
        >
          {
            this.state.dataList && this.state.dataList.length>0
              ? this.state.dataList.map((item, index) => (
                <View className='card' key={index} style='margin: 10pt 0'>
                  <AtCard title={<StatusLabel value={item.dealStatus}/>}>
                    <View className='card-content'>
                      <View className='contentItem'>
                        <View>开始时间:</View>
                        <View>{moment(item.leaveBeginTime).format('YYYY-MM-DD')}</View>
                      </View>
                      <View className='contentItem'>
                        <View>结束时间:</View>
                        <View>{moment(item.leaveEndTime).format('YYYY-MM-DD')}</View>
                      </View>
                      <View className='contentItem'>
                        <View>天数:</View>
                        <View>{item.leaveDay}天</View>
                      </View>
                      <View className='contentItem'>
                        <View>类型:</View>
                        <View>{leaveType[getIndex(leaveType, item.type)].label}</View>
                      </View>
                    </View>
                    {
                      item.dealStatus === 0
                        ? <View className='card-btnBar'>
                        <View className='btn' onClick={() => this.showDelModal(item.id)}>删除</View>
                        <View className='btn border' onClick={() => this.turnToApply(item)}>修改</View>
                        <View className='btn' onClick={() => this.sendBPM(item.id)}>发起</View>
                      </View>
                        : <View className='card-btnBar'>
                        <View className='btn' onClick={() => this.handleDetails(item.mobileUrl)}>审批详情</View>
                      </View>
                    }
                  </AtCard>
                </View>
              ))
              : <NoData />
          }
        </ScrollView>

        <AtModal
          isOpened={this.state.isOpen}
          title='提示'
          cancelText='取消'
          confirmText='确认'
          onCancel={this.handleCancel}
          onConfirm={this.handleConfirm}
          content='是否确认删除此申请？'
        />

      </View>
    )
  }
}
